<template>
    <view class="container">
        <view class="momentItem" v-for="item in allMoment" :key="item.id" @click="toDatil(item.id)" >
            <view class="time"> {{ item.updateTime }} </view>
            <view class="main">
                <view class="imgBox" v-if="item.imgList">
                    <image
                        :src="item.imgList[0].img_path"
                        class="img"
                        mode="aspectFill"
                    />
                </view>
                <view class="txtBox">
                    <view class="title"> {{ item.title }} </view>
                    <view class="content"> {{ item.content }} </view>
                </view>
            </view>
            <view class="footer">
                <view class="btnBox">
                    <image
                        src="@/static/community/share.png"
                        mode="scaleToFill"
                        class="icon"
                    />
                    分享
                </view>
                <view class="btnBox" @click.stop="upvotoToId(item.id)">
                    <image
                        :src="
                            item.isUpvote
                                ? '/static/index/like_s.png'
                                : '/static/index/like_k.png'
                        "
                        mode="scaleToFill"
                        class="icon"
                    />
                    喜欢
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import storage from '@/utils/storage';
import { mapActions, mapState } from "vuex";
import { upvoteApi } from '@/servers/momentServer';
import { toast } from '@/common';
export default {
    data() {
        return {};
    },
    methods: {
        ...mapActions("momentStore", ["getAllMomentAction"]),
		toDatil(id){
            uni.$u.route('/pages_second/momentDetail/momentDetail', {moment_id:id});
        },
        async upvotoToId(moment_id){
            const option = {
                user_id: storage.getCache("userInfo").user_id,
                moment_id,
            };
            const res = await upvoteApi(option);
            const { data } = res;
            if (data) {
                await this.getAllMomentAction();
                toast({ title: "点赞成功~" });
            }
        }
    },
    watch: {},
    computed: {
        ...mapState("momentStore", ["allMoment"]),
    },
    created() {
        this.getAllMomentAction();
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 48rpx;
    .momentItem {
        // background-image: linear-gradient(45deg,#FAD0C4,#FFD1FF);
        // box-shadow: 2rpx 2rpx 4rpx #fff;
        background: #fff;
        box-shadow: 4rpx 4rpx 8rpx #ccc;
        padding: 24rpx 48rpx;
        border-radius: 32rpx;
        margin-bottom: 48rpx;

        .time {
            font-size: 24rpx;
            font-weight: bold;
        }

        .main {
            margin: 24rpx 0;
            display: flex;
            align-items: start;
            justify-content: start;

            .imgBox {
                margin-right: 20rpx;
                min-width: 150rpx;
                height: 150rpx;
                border-radius: 24rpx;
                overflow: hidden;
                .img {
                    width: 100%;
                    height: 100%;
                }
            }

            .title {
                font-size: 32rpx;
                font-weight: bolder;
                margin-bottom: 16rpx;
            }
            .content {
                color: #958992;
                font-size: 28rpx;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                max-height: 3em;
                line-height: 1.5em;
            }
        }
        .footer {
            display: flex;
            .btnBox {
                display: flex;
                align-items: center;
                background: #fff;
                padding: 12rpx 24rpx;
                border-radius: 24rpx;
                border: #ff80a2 2rpx solid;
                color: #ff80a2;
                font-size: 24rpx;
                font-weight: 600;
                margin-right: 36rpx;

                .icon {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 16rpx;
                }
            }
        }
    }
}
</style>
